<template>
  <div id="app" :class="{ 'dark-theme': isDark }">
    <el-container class="layout-container">
      <!-- 侧边栏 - 固定在左侧 -->
      <el-aside width="200px" :width="isCollapse ? '64px' : '200px'" class="sidebar-container">
        <Sidebar :is-collapse="isCollapse" />
      </el-aside>
      
      <el-container class="main-container">
        <!-- 顶部导航栏 - 位于右侧顶部 -->
        <el-header class="header-wrapper">
          <Header 
            :is-collapse="isCollapse" 
            @toggle-sidebar="toggleSidebar"
            @toggle-theme="(dark: boolean) => handleThemeToggle(dark)"
          />
        </el-header>
        
        <!-- 标签页 -->
        <Tabs />
        
        <!-- 主内容区 - 位于底部，与侧边栏相邻 -->
        <el-main class="main-content">
          <router-view v-slot="{ Component, route }">
            <transition name="fade" mode="out-in">
              <keep-alive>
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import Sidebar from './components/Layout/Sidebar.vue'
import Header from './components/Layout/Header.vue'
import Tabs from './components/Layout/Tabs.vue'
import { useTabsStore } from '@/stores/tabs'

const route = useRoute()
const tabsStore = useTabsStore()

// 侧边栏折叠状态
const isCollapse = ref(false)

// 深色模式状态
const isDark = ref(false)

// 切换侧边栏折叠状态
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
  updateLayoutOnSidebarToggle()
}

// 根据侧边栏状态更新布局
const updateLayoutOnSidebarToggle = async () => {
  await nextTick()
  const sidebarContainer = document.querySelector('.sidebar-container')
  const mainContainer = document.querySelector('.main-container')
  
  if (sidebarContainer && mainContainer) {
    if (isCollapse.value) {
      sidebarContainer.classList.add('collapse')
      mainContainer.classList.add('collapse')
    } else {
      sidebarContainer.classList.remove('collapse')
      mainContainer.classList.remove('collapse')
    }
  }
}

// 处理主题切换
const handleThemeToggle = (dark: boolean) => {
  isDark.value = dark
  // 这里可以添加主题切换的逻辑
  document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
}

// 监听路由变化，自动添加标签页
watch(route, (newRoute) => {
  if (newRoute.meta?.title) {
    const tabConfig = {
      path: newRoute.path,
      title: newRoute.meta.title as string,
      icon: getRouteIcon(newRoute.path),
      closable: newRoute.path !== '/' // 首页不可关闭
    }
    tabsStore.addTab(tabConfig)
  }
}, { immediate: true })

// 监听侧边栏折叠状态变化
watch(isCollapse, () => {
  updateLayoutOnSidebarToggle()
})

// 根据路由路径获取图标
const getRouteIcon = (path: string) => {
  const iconMap: Record<string, string> = {
    '/': 'House',
    '/matches/list': 'Trophy',
    '/matches/details': 'Document',
    '/matches/add': 'Plus',
    '/matches/statistics': 'DataAnalysis',
    '/players/list': 'User',
    '/players/profile': 'UserFilled',
    '/players/ranking': 'TrophyBase',
    '/players/statistics': 'DataAnalysis',
    '/system/users': 'User',
    '/system/settings': 'Setting',
    '/about': 'InfoFilled',
    '/test': 'Grid'
  }
  return iconMap[path] || 'Document'
}

onMounted(() => {
  // 初始化首页标签
  tabsStore.initHomeTab()
  
  // 初始化主题
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme) {
    isDark.value = savedTheme === 'dark'
    handleThemeToggle(isDark.value)
  }
  
  // 初始化布局
  updateLayoutOnSidebarToggle()
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  transition: all 0.3s ease;
}

.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.sidebar-container {
  height: 100vh;
  background-color: #4a5568;
  border-right: 1px solid #e4e7ed;
  overflow: hidden;
  transition: all 0.3s ease;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.sidebar-container.collapse {
  width: 64px;
}

.main-container {
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* 侧边栏折叠时的样式已在上方定义 */

.main-container.collapse {
  margin-left: 64px;
  width: calc(100% - 64px);
}

.header-wrapper {
  height: 60px;
  border-bottom: 1px solid #e4e7ed;
}

.main-content {
  background-color: #f0f2f5;
  padding: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: calc(100vh - 60px - 40px); /* 减去头部(60px)和标签页(40px)高度 */
  display: flex;
  flex-direction: column;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 深色主题 */
.dark-theme {
  color: #e5e5e5;
}

.dark-theme .main-content {
  background-color: #1a1a1a;
}

.dark-theme .el-container {
  background-color: #1a1a1a;
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 深色主题滚动条 */
.dark-theme ::-webkit-scrollbar-track {
  background: #2a2a2a;
}

.dark-theme ::-webkit-scrollbar-thumb {
  background: #555;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: #777;
}
</style>